<template>
<div>
  <h2>新增系统用户</h2>
  <div>
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <a-form @submit="add" :form="user">
          <a-form-item
              label="账号："
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
                v-model:value="user.username"
                v-decorator="[
              'user.username',
              {rules: [{ required: true, message: '请输入账号信息' }]}
            ]"
                name="username"
                placeholder="请输入账号名称" />
          </a-form-item>
          <a-form-item
              label="密码"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input-password
                v-model:value="user.password"
                placeholder="请输入密码"
                v-decorator="[
              'user.password',
              {rules: [{ required: true, message: '必须输入密码！' }]}
            ]" />
          </a-form-item>
          <a-form-item
              label="确认密码"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input-password
                placeholder="请再次输入密码"
                v-decorator="[
              'password2',
              {rules: [{ required: true, message: '再次密码密码必须输入' }]}
            ]" />
          </a-form-item>
          <a-form-item>
            <a-select field-names="rid" name="rid" v-model:value="user.rid"  v-decorator="[
              'rid',
              {rules: [{ required: true, message: '必须选择结束' }]}
            ]">
              <a-select-option value="1">超级管理员</a-select-option>
              <a-select-option value="2">高层</a-select-option>
              <a-select-option value="3">中层</a-select-option>
              <a-select-option value="4">基层</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
              :wrapperCol="{ span: 24 }"
              style="text-align: center"
          >
            <a-button html-type="submit" type="primary">新增系统用户</a-button>
          </a-form-item>
        </a-form>
      </a-card>
  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import axios from "axios";
import store from "store";
import { useRouter } from 'vue-router'
const router = useRouter()
const user=ref({
  username:"",
  password:""
})
const add= async (data)=>{
  console.log(data);
  const r = await axios({
    url: '/api/sysuser/add',
    method: 'post',
    headers:{
      access_token: store.get('access_token')
    },
    data:user.value
  })

  if(r.data.code==0){
    //
    router.push('/layouts/users/list')
  }
  console.log(r.data);
}
onMounted(async () => {

})
</script>

<style scoped>

</style>
